<template>
<div class="header">
  <header>
    <h1>在线商城后台管理系统</h1>
    
    <img :src="'http://localhost:9191'+user.avatarUrl">
    <el-menu
    mode="horiontal"
    :collapse=false
    active-text-color="orange"
    background-color="rgba(70, 76, 91, 1)"
    text-color="#ccc"
    class="tou"
    >
    
    <el-sub-menu index="1">
            <!-- 使用插槽：编辑第二个一级菜单的名称 -->
            <template #title>{{user.username}}</template>
            <!-- 设置二级菜单 -->
            <el-menu-item index="2-1">修改密码</el-menu-item>
            <el-menu-item @click="tui()" index="2-2">退出登录</el-menu-item>
        </el-sub-menu>
    </el-menu>
  </header>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const user = ref({})

onMounted(() => {
  const local = localStorage.getItem('user')
  if (local) {
    user.value = JSON.parse(local);
  }
})

const router = useRouter()

const tui = () => {
  // 清除所有localStorage数据
  localStorage.clear()
  // 跳转到登录页面
  router.push('/admin')
}
</script>

<style scoped>
.header{
    width: 100%;
    /* height: 15vh; */
    background-color: #2a2a33;
    color: white;
    display: flex;
}
header{
  display: flex;
}
header h1{
  font-size: 30px;
  color: yellow;
  align-items: center;
  margin: 50px 50px; /* 添加左右外边距 */
}

.tou{
  border: 0;
    background-color: transparent;
    position: absolute;
    right: 4%;
    margin: 30px
}
img{
  width: 80px;
  height: 80px;
  border-radius: 99px;
  margin: 20px ;
  position: absolute;
  right: 15%;
  
}
</style>